<template>
  <div class="avatar-container no-drag" >
    <div class="avatar-content" :style="avatarStyle">
      <img @click.stop="handleAvatar" :src="currentSrc" @load="handleAvatarLoad" @error="handleAvatarError" alt="" style="width: 100%;height: 100%;object-fit: cover;border-radius: 5px">
      <yd-dialog class="info no-drag" v-model:show="isShow" :x="mouseX" :y="mouseY">
<!--        <div class="info-container">
          <header>
            <yd-img width="60px" height="60px" :src="contactDetail.avatar" style="margin-right: 15px"></yd-img>
            <div class="account-info">
              <div style="width: 100%;
                  display: flex;
                  justify-content: space-between;">
                <div style="display: flex;align-items: center;font-size: 16px">
                  <span style="margin-right: 5px;margin-bottom: 5px">{{contactDetail.isFriend ? contactDetail.contactInfo.contactRemark : contactDetail.nickname}}</span>
                  <el-icon v-if="contactDetail.gender === 1"  style="font-weight: bolder;font-size: 16px; color: deepskyblue"><Female /></el-icon>
                  <el-icon v-else style="font-weight: bolder;font-size: 16px; color: deeppink"><Male /></el-icon>
                </div>
                <el-icon v-if="!isOwner" style="color: rgb(158, 158, 158)"><MoreFilled /></el-icon>
              </div>

              <div class="info-inner">
                <div v-if="!isOwner">
                  <span class="title">昵称：</span>
                  <span>{{ contactDetail.nickname }}</span>
                </div>

                <div>
                  <span class="title">微信号：</span>
                  <span>{{ contactDetail.weChatCode }}</span>
                </div>

                <div>
                  <span class="title">地区：</span>
                  <span>{{ contactDetail.areaName ? contactDetail.areaName : '未知' }}</span>
                </div>
              </div>
            </div>
          </header>

          <ul class="other-container">
            <li v-if="!isOwner">
              <div>
                <span class="title">备注</span>
                <span>{{contactDetail.isFriend ? contactDetail.contactInfo.contactRemark : contactDetail.nickname}}</span>
              </div>
            </li>

            <li v-if="contactDetail.friendCircle && contactDetail.friendCircle.length > 0">
              <div style="display: flex; align-items: center;">
                <span class="title">朋友圈</span>
                <div v-for="(item, index) in contactDetail.friendCircle" :key="index">
                  <div>
                    <yd-img style="margin-right: 5px;" width="30px" height="30px" fit="cover" :src="item"></yd-img>
                  </div>
                </div>
              </div>
            </li>

            <li v-else>
              <div style="display: flex; align-items: center;">
                <span class="title">朋友圈</span>
                <span>空空如也~</span>
              </div>
            </li>


            <li>
              <div v-if="contactDetail.commonGroupNumber">
                <span class="title" >共同群聊</span>
                <span >{{ contactDetail.commonGroupNumber}}个</span>
              </div>
              <div style="margin: 5px 0">
                <span class="title">个性签名</span>
                <span >{{contactDetail.personalSignature ? contactDetail.personalSignature : '空空如也~' }}</span>
              </div>
              <div v-if="!isOwner">
                <span class="title">来源</span>
                <span >{{contactDetail.source ? contactDetail.source : '账号搜索添加'}}</span>
              </div>
            </li>

          </ul>

          <ul class="operator-container">
            <li>
              <span class="iconfont icon-chat" style="font-size: 20px;margin-bottom: 5px"></span>
              发消息
            </li>
            <li v-if="!isOwner">
              <el-icon class="icon"><Phone /></el-icon>
              语音聊天
            </li>
            <li v-if="!isOwner">
              <el-icon class="icon"><VideoCamera /></el-icon>
              视频聊天
            </li>
          </ul>
        </div>-->

        <contact-info :contactDetail="contactDetail"></contact-info>
      </yd-dialog>
    </div>
  </div>
</template>

<script setup>
import blankImg from '@/assets/img/blank.jpeg'
import ydDialog from '@/components/dialog/index.vue'
import { ref, toRefs, watch } from 'vue'
import contactInfo from '@/components/user/info/index.vue'
import { searchUser } from '../../../api/user'
import { ElMessage } from 'element-plus'
import { useUserStore } from '../../../stores/user'

const userStore = useUserStore()
const isOwner = ref(false)

const props = defineProps({
  avatar: String,
  email: String,
  avatarWidth: {
    type: String,
    default: '35px'
  },
  avatarHeight: {
    type: String,
    default: '35px'
  }
})

const { avatar, email, avatarWidth, avatarHeight } = toRefs(props)

watch(
  () => props.avatar,
  (newVal) => {
    currentSrc.value = newVal
  }
)
// console.log('邮箱:' , email)
const currentSrc = ref(avatar || blankImg)


const avatarStyle = {
  width: props.avatarWidth,
  height: avatarHeight,
}
const isShow = ref(false)
const mouseX = ref(0)
const mouseY = ref(0)

const handleAvatar = (event) => {
  mouseX.value = event.clientX
  mouseY.value = event.clientY
  console.log('222' , email.value)
  searchUser(email.value).then(res => {
    if (res.code === 200) {
      contactDetail.value = res.data
      //
      // isOwner.value = userStore.email === contactDetail.value.email
    } else {
      ElMessage({
        type: 'error',
        message: res.message,
        })
    }
  })
  isShow.value = true
}

// 头像加载完成时
const handleAvatarLoad = (e) => {
  if (e.target.naturalWidth > 0) {
    // console.log('✅ 图片真正加载成功')
  } else {
    // console.log('❌ 图片损坏')
  }
}

const handleAvatarError = () => {
  // console.log('❌ 图片加载失败')
  currentSrc.value = blankImg
}

const contactDetail = ref( {}
//   {
//   id: 1,
//   gender: 1,
//   avatar: 'https://img.tuxiangyan.com/zb_users/upload/2023/02/202302091675904133489339.jpg',
//   nickname: 'A-',
//   weChatCode:'Zik-J_0522',
//   areaName: '山东 青岛',
//   remark: '租房',
//   permission: '不让他（她）看朋友圈和状态',
//   friendCircle: [
//     'https://ts1.tc.mm.bing.net/th/id/OIP-C.3nrDn8IrD3x5iVX0PI6cDgHaLH?w=160&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',
//     'https://ts1.tc.mm.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQHaEo?w=255&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',
//   ],
//   videoAccount: [
//     'https://ts1.tc.mm.bing.net/th/id/OIP-C.3nrDn8IrD3x5iVX0PI6cDgHaLH?w=160&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',
//     'https://ts1.tc.mm.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQHaEo?w=255&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',
//   ],
//   commonGroupNumber: 1,
//   personalSignature: '忘记烦恼.',
//   source:'通过名片分享添加'
// }
)

</script>


<style scoped lang="less">
  .avatar-container {


    .avatar-content {
      position: relative;
      cursor: pointer;

      .info {
        width: 280px;


        .info-container {
          padding: 25px;

          header {
            display: flex;

            .account-info {
              flex: 1;

              .info-inner {
                color: rgb(168, 168, 168);
                font-size: 12px;

                .title {
                  display: inline-block;
                  width: 50px;
                }
              }


            }
          }



          .other-container>li:first-child {
            border-top: rgb(230, 230, 230) 1px solid ;
          }

          .other-container {
            margin-top: 20px;
            display: flex;
            flex-direction: column;


            li {
              padding: 15px 0;
              border-bottom: rgb(230, 230, 230) 1px solid;

              .title {
                width: 70px;
                color: rgb(168, 168, 168);
                display: inline-block;
              }
            }
          }


          .operator-container>div:last-child {
            margin-right: 0;
          }

          .operator-container {
            display: flex;
            box-sizing: border-box;
            padding: 25px 5px;
            padding-bottom: 0px;
            justify-content: center;

            li {
              display: flex;
              flex-direction: column;
              color: rgb(87, 107, 149);
              align-items: center;
              width: 70px;
              height: 60px;
              justify-content: center;
              margin-right: 0px;

              .icon {
                font-size: 22px;
                margin-bottom: 5px;
              }
            }

            li:hover {
              background-color: rgb(242, 242, 242);
              cursor: pointer;
              border-radius: 5px;
            }
          }

        }
      }



    }



  }

</style>
